<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta name="udacity-grader" content="tests.json" unit-tests="tests.js">
  <base target="_blank">
  <title>Udacity RI: relative width</title>

  <link rel="icon" sizes="192x192" href="../../../images/icon.png">

  <style>
    body {
      margin: 0;
    }

    img {
      float: left;
      margin-right: 10px;
      width: calc((100% - 20px)/3);  
      /*  
       + 和 - 运算符两侧必须有一个空格。 
      （* 和 / 两旁不需要空格，因为这是关于否定（negation）歧义的问题）。
      例如， calc(100px - 10%) 有效， calc(100px-10%) 则无效。
      */
    }

    img:last-of-type {
      margin-right: 0;
    }

    /*
    Hmmmmm... you might need another CSS class too.
    */
  </style>

</head>

<body>
  <img id="img1" src="balham.jpg" alt="Balham High Road and a rainbow" />
  <img id="img2" src="balham.jpg" alt="Balham High Road and a rainbow" />
  <img id="img3" src="balham.jpg" alt="Balham High Road and a rainbow" />
  <script src="../../../js/lib/ga.js"></script>

</body>

</html>